---
title: Password Input
description: Used to collect passwords.
composition: true
---

<ExampleTabs name="password-input-basic" />

## Usage

```jsx
import { PasswordInput } from '@saas-ui/react/password-input'
```

```jsx
<PasswordInput />
```

## Examples

### Sizes

Use the `size` prop to change the size of the password input.

:::info

The password input sizes are mapped to the `Input` component sizes.

:::

<ExampleTabs name="password-input-with-sizes" />

### Controlled

Use the `value` and `onChange` props to control the current page.

<ExampleTabs name="password-input-controlled" />

### Hook Form

Here's an example of how to use the `PasswordInput` component with
`react-hook-form`.

<ExampleTabs name="password-input-with-hook-form" />

### Controlled Visibility

Use the `visible` and `onVisibleChange` props to control the visibility of the
password input.

<ExampleTabs name="password-input-controlled-visibility" />

## Props

### Root

<PropTable component="PasswordInput" part="PasswordInput" />
